<template>
    <div class="select-tree">
        <el-select :value="checkedLabel" v-bind="options" popper-class="chf-select-tree" multiple collapse-tags clearable @clear="clear">
            <!-- <el-button>全选</el-button>
            <el-button>取消</el-button> -->
            <el-option label="label" value="value">
                <ChfTree v-bind="{options: Object.assign({}, this.defaultOptions, this.options), events: Object.assign({}, this.defaultEvents, this.events)}"
                    style="overflow: visible; display: flex; flex-direction: column" class="tree" ref="tree" />
            </el-option>
        </el-select>
    </div>

</template>

<script>
import ChfTree from "@/components/chf-tree/index.vue"
export default {
    components: {
        ChfTree
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        options: {
            type: Object,
            default () {
                return {}
            }
        },
        events: {
            type: Object,
            default () {
                return {}
            }
        },
        value: {
            type: Array,
            default: () => []
        },
        query: {
            default: null,
            type: Function
        }
    },
    watch: {
        value: {
            handler (list) {
                this.defaultOptions['default-checked-keys'] = list
                this.getCheckedNodes();
            },
            deep: true,
            immediate: true
        }
    },
    data () {
        return {
            checkedLabel: [],
            defaultOptions: {
                ['show-checkbox']: true,
                ['node-key']: "id",
            },
            defaultEvents: {
                check: (data, checked) => {
                    this.$emit('change', checked.checkedKeys)
                    // this.checkedLabel = this.getCheckedLabel(checked.checkedNodes)
                },
            },

        }
    },
    mounted () {
        this.query && this.query(this.options)
    },
    methods: {
        getCheckedNodes () {
            let list = this.$refs.tree?.getRefs().getCheckedNodes() || []
            if (list[0]) {
                this.checkedLabel = this.getCheckedLabel(list)
            } else {
                this.checkedLabel = []
                setTimeout(() => {
                    this.getCheckedNodes();
                }, 600)
            }
        },
        getCheckedLabel (list) {
            return list.map(item => {
                item.children?.[0] && this.getCheckedLabel(item.children)
                return this.options.setLabel?.(item) || item[this.options.props?.label] || item.name
            })
        },
        setCheckedKeys (list) {
            this.$refs.tree.getRefs().setCheckedKeys(list)
            this.getCheckedNodes();
        },
        clear () {
            this.$emit('change', [])
            this.$refs.tree.getRefs().setCheckedKeys([])
        }
    },
}
</script>

<style lang="scss" scoped>
.select-tree {
    .tree {
        display: flex;
        flex-direction: column;
    }
}
</style>

<style lang="scss" >
.chf-select-tree {
    .el-select-dropdown__wrap {
        max-height: 500px;
    }
    .el-select-dropdown__item {
        padding: 0 10px;
        height: auto;
        min-height: 460px;
        background: white;
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background: white;
    }
}
</style>